<template>
    <div id="IndexPage">
        <el-header class="custom-header " style="text-align: right; font-size: 12px;border-radius: 0px 8px 0px 0px;">
            <i class="el-icon-s-fold" style="margin-right:1300px;font-size: 25px;margin-top: 15px;"></i>
            <span>{{userName}}</span>

            <el-dropdown trigger="click">
                <i class="el-icon-arrow-down" style="margin-right: 30px"></i>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item @click.native="loginout">退出登录</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </el-header>
        <div class="zcl">
            <el-aside width="201px" style="background-color: rgb(238, 241, 246)">
                <el-header style="border-radius: 8px 0px 0px 0px;background-color: #2b334a;">
                    <div class="header"><span style="color: white;margin-left: 20px;">校园管理系统</span></div>
                </el-header>
            </el-aside>
        
            <el-menu background-color="gray" text-color="#fff" active-text-color="#ffd04b" default-active="/home" style="width: 100px;" router>
                <menu-item v-for="asideMenu in menuList" :key="asideMenu.name" :item="asideMenu"/>
            </el-menu>
        </div>
        <el-container>
            <div class="main">
                <el-main>
                    <router-view name="user"></router-view>
                    <router-view name="classManagement"></router-view>
                    <router-view name="studentManagement"></router-view>
                    <router-view name="addStudent"></router-view>
                    <router-view name="updStudent"></router-view>
                    <router-view name="fieldManage"></router-view>
                    <router-view name="leave"></router-view>
                    <router-view name="approval"></router-view>
                    <router-view name="accessManage"></router-view>
                    <router-view name="rule"></router-view>
                    <router-view name="accessControlInfo"></router-view>
                    <router-view name="gateway"></router-view>
                    <router-view name="ewDeviceManger"></router-view>
                    <router-view name="electricityUse"></router-view>
                    <router-view name="role"></router-view>
                </el-main>
            </div>
        </el-container>
    </div>
    
</template>
<script>
import MenuItem from '../views/MenuItem';
import axios from 'axios';
export default {
    name: 'LeftAside',
    components: {
        MenuItem
    },
    data () {
        return {
            menuList: [],
            Authorization:{},
            userName:'',
        }
    },
    created () {
       this.getMenuList();
       this.getInfo();
    },
    methods: {
        getMenuList () {
            this.Authorization = localStorage.getItem("Authorization");
                if(this.Authorization == null || this.Authorization == ''){
                this.$router.push('/login');
            }else{
                axios({
                    url: 'http://localhost:9002/sys/menu/getRouters',
                    method: 'get',
                    headers: {
                    'Authorization': this.Authorization
                    }
                })
                .then(response => {
                    console.log(response);
                    this.menuList = response.data.data;
                    
                })
            }
        },
        getInfo(){
            this.Authorization = localStorage.getItem("Authorization");
            if(this.Authorization == null || this.Authorization == ''){
            this.$router.push('/login');
            }else{
                axios({
                    url: 'http://localhost:9002/admin/info',
                    method: 'get',
                    headers: {
                    'Authorization': this.Authorization
                    }
                })
                .then(response => {
                    console.log(response);
                    this.userName = response.data.data.name;
                    
                })
            }
        },
        loginout(){
            console.log("退出登录");
            if(confirm("确定退出登录？")){
                axios({
                url: 'http://localhost:9002/admin/logout',
                method: 'post',
                })
                .then(response => {
                console.log(response);
                localStorage.removeItem("Authorization");
                this.$router.push('/login');
                })
            }
            
        },
    }
}
</script>
<style>
 .el-header {
    background-color: white;
    border-bottom: 1px solid gray;
    color: #333;
    line-height: 60px;
  }
  .custom-header {
        width: 1490px;
        position: absolute;
        left: 209px;
    }
    .main{
        width: 1490px;
        height:1200px;
        border: 1px solid red;
        position: absolute;
        left: 209px;
        top: 70px;
    }
</style>